<template>
    <!-- 添加或修改用户配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" :close-on-click-modal="false">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-row>
                <el-col :span="24">
                    <el-form-item :label="$locale('jobList.add.school')" prop="schoolId">
                        <el-select clearable v-model="form.schoolId" style="width:100%">
                            <el-option v-for="item in schooList" :key="item.id" :label="item.schoolName" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-for="(item,index) in form.childVOS" :key="index">
                    <el-col :span="12">
                        <el-form-item :label="$locale('myDevice.determinedList.turnover box')" prop="boxId">
                            <el-select clearable v-model="item.boxId">
                                <el-option v-for="item in deviceList" :key="item.id" :value="item.id" :label="item.boxName"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="boxTotal" label-width="10px">
                            <el-input-number v-model="item.boxTotal" controls-position="right" :min="0"></el-input-number>
                            <i v-if="index != 0" class="el-icon-remove-outline" @click="removeDevice(item)" style="margin-left: 20px;cursor: pointer;color:red"></i>
                            <i v-else @click="addDevice" class="el-icon-circle-plus-outline" style="margin-left: 20px;cursor: pointer;color:#1890ff"></i>
                        </el-form-item>
                    </el-col>
                </el-col>
                <el-col :span="24">
                    <el-form-item :label="$locale('classList.add.notes')" prop="remark">
                        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" :placeholder="$locale('levelList.add.Please enter a note')" v-model="form.remark">
                        </el-input> </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">{{ $locale('classList.add.determine') }}</el-button>
            <el-button @click="cancel">{{ $locale('classList.add.Cancel') }}</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { add, edit, getById } from "@/api/device/schoolDevice";
import { getSchoolTurnoverBoxList } from "@/api/device/turnoverBoxList";
import { schoolSelect } from "@/api/experiment/experimentList";

export default {
    name: "schoolDeviceAdd",
    data () {
        return {
            // 遮罩层
            loading: true,
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 表单参数
            childVOS: [
                {
                    boxId: undefined,
                    boxTotal: undefined
                }
            ],
            form: {},
            deviceList: [],
            schooList: [],
            listData: [],
            // 表单校验
            rules: {
                schoolId: [
                    { required: true, message: "学校不能为空", trigger: "change" }
                ]
            }
        };
    },
    created () {
        this.getSchoolSelect()
        this.getturnoverBoxPage()
    },
    methods: {
        // 表单重置
        reset () {
            this.form = {
                schoolId: undefined,
                childVOS: this.deepClone(this.childVOS)
            };
            this.resetForm("form");
        },
        addDevice () {
            this.form['childVOS'].push(this.deepClone(this.childVOS[0]));
        },
        removeDevice (index) {
            this.form['childVOS'].splice(index, 1);
        },
        /** 新增按钮操作 */
        handleAdd () {
            this.reset();
            this.open = true;
            this.title = "新增学校设备";
        },
        /** 修改按钮操作 */
        handleUpdate (row) {
            this.reset();
            this.form = this.deepClone(row)
            this.form.childVOS = this.form.childVOS.map(item => {
                item['boxId'] = item.parentId
                item['boxTotal'] = this.form.deviceTotal
                return item
            })
            this.open = true;
            this.title = "修改学校设备";
            // getById({ id: row.id }).then(({ data }) => {
            //     this.form = data


            // });

        },
        getSchoolSelect () {
            schoolSelect().then(({ data }) => {
                this.schooList = data;
            });
        },
        getturnoverBoxPage () {
            getSchoolTurnoverBoxList().then(({ data }) => {
                this.deviceList = data;
            });
        },
        /** 提交按钮 */
        submitForm: function () {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    let form = this.deepClone(this.form)
                    form['schoolName'] = this.schooList.filter(item => item.id == this.form.schoolId)[0]?.schoolName
                    form['turnoverBoxVOList'] = form.childVOS.filter(item => {
                        return item.boxId || item.boxTotal;
                    });
                    if (form.id != undefined) {
                        edit(form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.$emit('getList');
                        });
                    } else {
                        add(form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.$emit('getList');
                        });
                    }
                }
            });
        },
        // 取消按钮
        cancel () {
            this.open = false;
            this.reset();
        },
    }
};
</script>

<style lang="scss" scoped>
.el-rate {
    line-height: 2;
}
</style>
